<template>
    <div class="section">
     <div class="cover1">
     <div class="PersonTop">
       <div class="PersonTop_img">
   <el-upload class="avatar-uploader" action="http://localhost:9090/file/upload" :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="form.avatar" :src="form.avatar" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
       </div>
       <div class="PersonTop_text">
         <div class="user_text">
           <div class="user_name">
             <span> 用户名：{{ form.username }} </span>
           </div>
           <div class="user-v" >
             <el-tag type="success" class="user-v-font" v-if="form.role==='普通用户'">普通用户</el-tag>
             <el-tag  type="primary" class="user-v-font" v-if="form.role==='管理员'">管理员</el-tag>
           </div>
           <div class="username">
             <span>昵称： {{ form.nickname }}</span>
           </div>
           <div class="user_anniu">
             <el-button
               class="el-icon-edit"
               type="primary"
               size="medium"
               plain
               @click="edit"
               >编辑</el-button
             >
           </div>
           <div class="EntryUserManage" v-show="showEntry">   <el-button
               class="el-icon-s-data"
               type="primary"
               size="medium"
               plain
               @click="EntryUserManage"
               >用户权限管理</el-button
             ></div>
         </div>
       </div>
     </div>
     <el-card  class="info">
     <el-descriptions class="margin-top" title="简介" :column="2" border>
       <el-descriptions-item class="temp">
         <template slot="label" >
           <i class="el-icon-user-solid"></i>
           用户名
         </template>
         {{ form.username }}
       </el-descriptions-item>
       <el-descriptions-item>
         <template slot="label" class="temp">
           <i class="el-icon-s-custom"></i>
           昵称
         </template>
         {{ form.nickname }}
       </el-descriptions-item>
       <el-descriptions-item>
         <template slot="label" class="temp">
           <i class="el-icon-message"></i>
           邮箱Email
         </template>
         {{ form.email }}
       </el-descriptions-item>
       <el-descriptions-item>
         <template slot="label" class="temp">
           <i class="el-icon-mobile-phone"></i>
           电话
         </template>
        {{ form.phone }}
       </el-descriptions-item>
       <el-descriptions-item>
         <template slot="label" class="temp">
           <i class="el-icon-s-home"></i>
           部门
         </template>
         {{ form.department }}
       </el-descriptions-item>
       <el-descriptions-item>
         <template slot="label" class="temp">
           <i class="el-icon-date"></i>
           注册日期
         </template>
         {{ form.registerTime }}
       </el-descriptions-item>
       <el-descriptions-item>
         <template slot="label" class="temp">
           <i class="el-icon-user"></i>
           职位
         </template>
         {{ form.position }}
       </el-descriptions-item>
       <el-descriptions-item>
         <template slot="label" class="temp">
           <i class="el-icon-user"></i>
           授权状态
         </template>
         {{ form.grantstatus }}
       </el-descriptions-item>
     </el-descriptions>
   </el-card>
   <el-dialog
 title="修改个人信息"
 :visible.sync="InfoVisible"
 width="60%"
 :before-close="handleClose">
 <el-form :model="form" :rules="rules" ref="form" label-width="150px">
     <div class="updateinfo">
         <el-form-item label="昵称" prop="nickname">
           <el-input v-model="form.nickname"></el-input>
         </el-form-item>
         <el-form-item label="邮箱email" prop="email">
           <el-input v-model="form.email"></el-input>
         </el-form-item>
         <el-form-item label="电话" prop="phone">
           <el-input v-model="form.phone"></el-input>
         </el-form-item>
         <el-form-item label="部门" prop="department">
           <el-input v-model="form.department"></el-input>
         </el-form-item>
 
 </div>
 </el-form>
 <span slot="footer" class="dialog-footer">
   <el-button @click="handleClose">取 消</el-button>
   <el-button type="primary" @click="submit">提 交</el-button>
 </span>
</el-dialog>

   </div>
</div>
 </template>
 

<script>
import AutoHeader from './AutoHeader.vue'
export default {
   name: "Person",
   data() {
   return {
       form: {},
       user: sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {},
       rules: {
       nickname: [
         { required: true, message: "昵称不能为空", trigger: "blur" },
       ],
       phone: [
         { required: true, message: "电话不能为空", trigger: "blur" },
       ],
       department:[
         { required: true, message: "部门不能为空", trigger: "blur" },
       ]
       },
       InfoVisible:false,
       showEntry:false
   }
 },
 components:{
   AutoHeader
 },
 created() {    //根据缓存中的账号返回一整条记录
       this.request.get("/user/username/" + this.user.username).then(res => {
           if (res.data.code === '200') {        //返回的是User类中的属性
               this.form = res.data.data
               if(res.data.data.role==='管理员'){
               this.showEntry=true
               }
           }
       })
   },
   methods:{
     EntryUserManage(){
     this.$router.push("/usermanage")
     location.reload();//进入用户管理界面时，采用页面刷新的办法把导航栏选中状态刷掉
     },
     handleClose(){
       this.InfoVisible=false
     },
     submit(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
       this.request.post("/user", this.form).then(res => {
               if(res.data.data){
                // sessionStorage.setItem("user", JSON.stringify(res.data)) 
               this.$message.success("修改成功")
               this.InfoVisible=false
               AutoHeader.name=this.form.nickname
              
               console.log(AutoHeader.name)
               AutoHeader.$forceUpdate()
               }else{
               this.$message.error("修改失败")
               }
           })
          }
        })
     },
     edit(){
       this.InfoVisible=true
     },
     handleAvatarSuccess(res) {
             console.log(res)
            this.form.avatar = res
            this.request.post("/user", this.form).then(rest => {
                if (rest.data.code === '200') {
                    this.$message.success("保存成功")
                    console.log('头像url是'+res)
                } else {
                    this.$message.error("保存失败")
                }
            })
            AutoHeader.img=res
            AutoHeader.$forceUpdate()
        }
   }
}
</script>

<style  scoped>
.section {
   display: flex;
   justify-content: space-between;
   width: 100%;
   height: 642px;
   .cover1 {
     margin-top: 15px;
     margin-left: 125px;
     width: 1000px;
     height: 642px;
  
      
         }
       }
.temp{
   width: 10px;
   padding: 5px 10px;

}
.EntryUserManage{
  width: 100px;
   height: 100px;
  position:absolute;
  margin: -100px 640px;
}
.info{
   width: 1000px;
   height: 300px;
   position:absolute;
   margin: 250px 258px;
   background-color: #fff;
}


.PersonTop {
 width: 1000px;
 height: 140px;
 padding-top: 20px;
 background-color: white;
 margin-top: 30px;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 border-radius: 5px;
}

.PersonTop_img {
 width: 150px;
 height: 120px;
 background-color: #8c939d;
 margin-right: 24px;
 margin-left: 20px;
 overflow: hidden;
 border-radius: 20px;
}

.PersonTop_img img {
 width: 100%;
 height: 100%;
 border-radius: 20px;
}

.PersonTop_text {
 height: 120px;
 width: 880px;
 display: flex;
}

.user_text {
 width: 60%;
 height: 100%;
 line-height: 30px;
}

.user_name {
 font-weight: bold;
}
.user-v {
 margin-bottom: -5px;
}

.user-v-font {
 font-size: 15px;
 color: #00c3ff;
}
.username {
 font-size: 14px;
 color: #999;
}


</style>